import React, { Component, Fragment } from "react";
import { Platform } from "react-native";
import _ from 'lodash';
import moment from 'moment';
import { View } from "react-native";
import Svg, { Path, G, Circle, Text as SVGT, TSpan } from "react-native-svg";
import ChartInfo from './chartInfo';


// 角度转弧度
const getRads = degrees => (Math.PI * degrees) / 180;

const getEndPoint = (x, y, r, rate) => {
  const endPoint = getRads(180 * (rate - 1))
  const _x = x + Math.cos(endPoint) * r; // 确定x轴坐标
  const _y = y + Math.sin(endPoint) * r; // 确定y轴坐标
  return [_x, _y];
}

const Arc = ({
  size,
  color = '#ccc',
  width = 20,
  radius,
  rate,
  endDot,
}) => {
  const endPoint = getEndPoint(size, size, radius, rate)
  const path = `
    M ${size - radius} ${size}
    A ${radius} ${radius} 0 0 1 ${endPoint[0]} ${endPoint[1]}
  `
  return (
    <G>
      <Circle
        cx={size - radius}
        cy={size}
        r={width / 2}
        fill={color}
      />
      <Path d={path} stroke={color} strokeWidth={width} fillOpacity={0} />
      <Circle
        cx={endPoint[0]}
        cy={endPoint[1]}
        r={width / 2}
        fill={color}
      />
      {endDot && <Circle
        cx={endPoint[0]}
        cy={endPoint[1]}
        r={width / 8}
        fill={endDot}
      />}
    </G>
  )
}

const DataArc = ({
  size,
  bgColor = '#ddd',
  frontColor = '#ff0',
  width = 20,
  radius,
  rate
}) => {
  return (
    <G>
      <Arc
        size={size}
        width={width}
        color={bgColor}
        radius={radius}
        rate={1}
      />
      <Arc
        size={size}
        width={width}
        color={frontColor}
        radius={radius}
        rate={rate}
        endDot='#fff'
      />
    </G>
  )
}

const COLORS = ['#ff3399', '#3399ff', '#47d147'];

export default class Chart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      width: props.width || 256,
      height: props.height || 128,
      size: props.size || 20,
      space: props.space || 5,
      colors: COLORS,
    }
  }
  render() {
    const { width, height, size, space, colors } = this.state;
    const radius = height - size / 2;
    const date = this.props.date ? { year: moment().year(), month: moment().month() + 1 } : null;
    return (
      <Fragment>
        <View style={{ alignItems: 'center', paddingTop: 16 }}>
          <Svg
            width={width}
            height={height + size}
          >
            <G>
              <SVGT
                x={width / 2 - 10}
                y={height - 20}
                textAnchor="middle"
                fontSize="20"
                fill="#666"
              >
                {date.month}
              </SVGT>
              <SVGT
                x={Platform.OS === 'ios' ? width / 2 - 5 : width / 2 + 8}
                y={height - 20}
                textAnchor="middle"
                fontSize="20"
                fill="#666"
              >月</SVGT>
              <SVGT
                x={width / 2}
                y={height - 2}
                textAnchor="middle"
                fontSize="16"
                fill="#999"
              >
                {date.year}
              </SVGT>
            </G>
            {_.map(this.props.data, ({ percentageRanking }, index) => {
              const _r = radius - index * (size + space);
              let _pr = percentageRanking + 1;
              if (_pr > 1 && _pr <= 100) {
                _pr = _pr / 100;
              } else if(_pr > 100) {
                _pr = 1;
              } else {
                _pr = 0;
              }
              return (
                <DataArc
                  key={`acr_${index}`}
                  size={height}
                  width={size}
                  radius={_r}
                  frontColor={colors[index]}
                  rate={_pr}
                />
              );
            })}
          </Svg>
        </View>
        <ChartInfo data={this.props.data} colors={colors} />
      </Fragment>
    );
  }
}